<link rel="ractive" href="./shared/project.html" name="Project">
<link rel="ractive" href="./shared/collection.html" name="Collection">
<link rel="ractive" href="./shared/header.html" name="Header">

<Header app="{{app}}" query="{{query}}"></Header>
<Collection collection="{{collection}}"></Collection>

<div class="projects" style="{{#if collection.length}}padding-top: 114px;{{/if}}">
	<div class="container">
		<div class="row" intro="{{#if fadeIn}}fade{{/if fadeIn}}">
			<div class="col-lg-16 col-lg-offset-4 col-md-22 col-md-offset-1 col-sm-24 col-sm-offset-0 col-xs-20 col-xs-offset-2">
				{{#if project}}
					<Project project="{{project}}" collection="{{collection}}" expandFiles="true"></Project>
				{{else}}
					{{#if project !== LOADING}}
						Project not found.
					{{/if}}
				{{/if project}}
			</div>
		</div>
	</div>
</div>

<script>
	component.exports = {
		computed: {
			title: function () {
				return this.get('name') + ' free CDN links by jsDelivr - A super-fast CDN for developers and webmasters';
			},
		},
		oninit: function () {
			if (!Ractive.isServer) {
				var search = require('public/js/utils/search.js');
				var _this = this;

				this.set('LOADING', {});
				this.set('project', this.get('LOADING'));

				search('name: ' + this.get('name')).then(function (result) {
					_this.set('project', result.response.hits[0]);
				});
			}
		}
	};
</script>
